<template>
  <div ref="chart1" id="chart1"></div>
</template>

<script>
import 'echarts-wordcloud/dist/echarts-wordcloud';
import 'echarts-wordcloud/dist/echarts-wordcloud.min'
export default {
  name: "EchartsWord",
  data(){
    return {
      data: [
        {
          name: "花鸟市场",
          value: 1446
        },
        {
          name: "汽车",
          value: 928
        },
        
      ],
    }
  },
  computed: {},
  mounted() {
    this.design_word()
  },
  methods: {
    design_word(){
            this.axios.get('/api/design/word').then((res)=>{
            // 判断返回信息状态
            if(res.data.code==200){
                this.data = res.data.words
                this.word()
            }
        }) 
        },
    word(){
        var data = {
      value: this.data,
      //小鸟图片
      image:
        ""
    };
    var myChart = this.$echarts.init(this.$refs["chart1"]);
    //温馨提示：image 选取有严格要求不可过大；，否则firefox不兼容  iconfont上面的图标可以
    var maskImage = new Image();
    maskImage.src = data.image;

    maskImage.onload = function() {
      myChart.setOption({
        backgroundColor: "#fff",
        tooltip: {
          show: false
        },
        series: [
          {
            type: "wordCloud",
            gridSize: 1,
            sizeRange: [12, 55],
            rotationRange: [-45, 0, 45, 90],
            maskImage: maskImage,
            textStyle: {
              normal: {
                color: function() {
                  return (
                    "rgb(" +
                    Math.round(Math.random() * 255) +
                    ", " +
                    Math.round(Math.random() * 255) +
                    ", " +
                    Math.round(Math.random() * 255) +
                    ")"
                  );
                }
              }
            },
            left: "center",
            top: "center",
            // width: '96%',
            // height: '100%',
            right: null,
            bottom: null,
            // width: 300,
            // height: 200,
            // top: 20,
            data: data.value
          }
        ]
      });
    };
      },
    options() {}
  }
};
</script>

<style scoped>
#chart1 {
  width: 50%;
  height: 400px;
}
</style>
